<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>18001010803 王凯</title>
    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <link rel="stylesheet" href="./download55zf/font_2249885_v6trtuzazmi/iconfont.css">
    <style>
        html{
            font-size: 4.5vw;
        }
        body{
            padding: 0;
            margin: 0;
        }
        a{
            text-decoration: none;/*链接 去下划线*/
        }
        .a ul{
            list-style: none;
            display: flex;
            width: 100%;
            text-align: center;
            padding: 0;
            margin: 0;
        }
        .c ul{
            list-style: none;
            display: flex;
            width: 100%;
            text-align: center;
            padding: 0;
            margin: 0;
        }
        .a li{
            width: 25%;
        }
        .c li{
            width: 25%;
        }
        .a{
            background-color: red;
            height: 5vh;
            
        }
        .icon {
            width: 2em;
            height: 2em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        .as{
            padding-top: 8px;
            font-size: 0.8rem;
            color: #fff;
        }
        .a b{
            color: #fff;
        }
        .as .iconfont{/*搜索*/
            position: absolute;
            top: 10px;
            right: 15px;
            color: #fff;
            
        }
        .swiper-slide img{
            width: 100%;
            height: 101px;
        }
        .c li{
            height: 4vh;
            line-height: 4vh;
            border-bottom: 1px solid rgb(245, 240, 240);
        }
        .ca{
            border-right: 1px solid rgb(245, 240, 240);
        }
        .c a{
            color: rgb(185, 173, 173);
        }
        .vlist{
            position: relative;
            list-style: none;
            padding-left: 5px;
            margin: 0;
            margin-bottom: 60px;
        }
        .vlist li{
            border-bottom: 1px solid rgb(238, 230, 230);
        }
        .vlist h2{
            margin-top: 5px;
            margin-bottom: 10px;
            font-size: 1rem;
        }
        .vlist h4{
            margin-top: 5px;
            margin-bottom: 10px;
            font-size: .5rem;
            color: rgb(199, 193, 193);
            position: relative;
            padding-right: 50px;
        }
        .vlist p{
            margin-top: 5px;
            margin-bottom: 10px;
            color: turquoise;
            
        }
        .vlist em{
            border: 1px solid turquoise;
            margin: 3px;
        }
        .fz span{
            background-color:orange ;
            color: #fff;
        }
        .fz{
            padding-bottom: 10px;
            color: rgb(199, 193, 193);
        }
        .p i{
            border: 1px solid orange;
            color: orange;
            margin: 3px;
        }
        .h2 span{
            position: absolute;
            right: 1.3rem;
            color: red;
            font-size: .8rem;
        }
        .h2 a{
            color: #000;
        }
        .h2 b{
            position: absolute;
            right: .4rem;
            /* padding-top: 7px; */
            font-size:0.8rem;
            color: rgb(199, 193, 193);
        }
        .fzfz p{
            padding-top: 3px;
            color: rgb(199, 193, 193);
        }
        .fzfz span{
            background-color:orchid ;
            color: #fff;
        }
        .h4 span{
            position: absolute;
            top: 0;
            right: 5px;
        }
        #hide{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            font-size: 10px;
            z-index: 999;/*重点*/
            background-color:#fff;
        }
        #hide ul{
            list-style: none;
            display: flex;
            width: 100%;
            text-align: center;
            padding: 0;
            margin: 0;
           
        }
        #hide li{
            padding-top: 5px;
            width: 20%;
        }
        #hide span{
            color: rgb(192, 181, 181);
        }
        #hide a{
            color: rgb(192, 181, 181);
        }
        .zx{
            padding: 0;
            margin-top: 3px;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <!-- a -->
    <script src="./download55zf/font_2249885_v6trtuzazmi/iconfont.js"></script>
    <div class="a">
        <ul>
            <li class="as"><a href="#"><b>大连∨</b> </a></li>
            <li>&nbsp</li>
            <li class="as"><a href="#"><b>热映</b></a></li>
            <li class="as"><a href="#"><b>影院</b></a></li>
            <li class="as"><a href="#"><b>待映</b></a></li>
            <li>&nbsp</li>
            <li class="as">
                <a href="#">
                    <span class="iconfont icon-search"></span>
                </a>
            </li>
        </ul>
    </div>
    <!-- b -->
    <div class="swiper-container" id="slide">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./tp/2a1.jpg"></div>
          <div class="swiper-slide"><img src="./tp/2a2.jpg"></div>
          <div class="swiper-slide"><img src="./tp/2a3.jpg"></div>
          </div>
    </div>
    <script src="./swiper-bundle.min.js"></script>
    <div class="swiper-pagination"></div>
    <div class="swiper-pagination"></div>
    </div>
    <script>
    var slide = new Swiper('#slide', {
      pagination: {
        el: '.swiper-pagination',
      },
            autoplay: {
            delay: 1500,
            disableOnInteraction: true,
        }
        });
    </script>
    <!-- c -->
    <div class="c">
        <ul>
            <li class="ca"><a href="#"><b>品牌ˇ</b></a></li>
            <li class="ca"><a href="#"><b>全城ˇ</b></a></li>
            <li class="ca"><a href="#"><b>距离近ˇ</b></a></li>
            <li><a href="#"><b>筛选ˇ</b></a></li>
        </ul>
    </div>
    <!-- d -->
    <ul class="vlist"></ul>
    <script>
        var data=[
            {
                img:"SFC星感觉国际影城（高新店）<span>19.9元</span><b>起</b>",
                title:"甘井子区大连高新技术产业园区博翔街49号...<span>0.6km</span>",
                content:"<em>改签&nbsp</em>",
                zan:"<span>&nbsp惠&nbsp</span>&nbsp哆啦A梦:大雄的新恐龙等2部影片特惠",
                zanzan:""
            },
            {
                img:"中影星美国际影城(软件园店)<span>9.9元</span><b>起</b>",
                title:"沙河口区大连高新技术产业园区软件园路1A-12...<span>1.7km</span>",
                content:"<em>退&nbsp</em><em>改签&nbsp</em><i>小吃折扣卡&nbsp</i><em>杜比全景声厅&nbsp</em>",
                zan:"<span>&nbsp惠&nbsp</span>&nbsp紧急救援等2部影片特惠<br>",
                zanzan:"<span>&nbsp卡&nbsp</span>&nbsp开卡特惠，首单1张最高立减4元"
            },
            {
                img:"中影华臣影城(软件园店)<span>13元</span><b>起</b>",
                title:"沙河口区数码路南段13号锦辉商城东财书香园店..<span>2.5km</span>",
                content:"<em>退&nbsp</em><em>[改签]&nbsp</em><i>小吃折扣卡&nbsp</i>",
                zan:"<span>&nbsp惠&nbsp</span>&nbsp紧急救援等3部影片特惠",
                zanzan:"<span>&nbsp卡&nbsp</span>&nbsp开卡特惠， 首单1张最高立减4元"
            },
            {
                img:"中影华臣影城(西安路店)<span>9.9元</span><b>起</b>",
                title:"沙河口区西安路123号天兴罗斯福国际中心5F<span>4.7km</span>",
                content:"",
                zan:"<span>&nbsp惠&nbsp</span>&nbsp紧急救援等3部影片特惠",
                zanzan:"<span>&nbsp卡&nbsp</span>&nbsp开卡特惠，首单1张最高立减2元"
            },
            {
                img:"北联影城(大连中体店)<span>19.9元</span><b>起</b>",
                title:"甘井子区柳韵园1-13号3层<span>7.5km</span>",
                content:"",
                zan:"",
                zanzan:"<span>&nbsp卡&nbsp</span>&nbsp开卡特惠，首单1张最高立减4元"
            }
        ];
        var vlist=document.querySelector(".vlist");
        data.forEach((v,i)=>{
            let li=document.createElement("li");
            li.innerHTML=`
            <h2 class="h2"><a href="#">${v.img}</a> </h2>
            <h4 class="h4">${v.title}</h4>
            <p class="p">${v.content}</p>
            <a href="#" class="fz">${v.zan}</a>
            <a href="#" class="fzfz"><p>${v.zanzan}</p></a>`;
            vlist.appendChild(li);//添加到网页显示
        })          
          
    </script>
    <!-- e -->
        <div id="hide">
            <ul>
                <li>
                    <span class="iconfont icon-mao"></span>
                    <p class="zx"><a href="index.html">首页</a></p>
                </li>
                <li>
                    <span class="iconfont icon-dianying1" style="color:rgb(238, 132, 113);"></span>
                    <p class="zx"><a href="dxm2.html" style="color:rgb(238, 132, 113);">电影/影院</a></p>
                </li>
                <li>
                    <span class="iconfont icon-xiaoshipin"></span>
                    <p class="zx"><a class="hs" href="dxm3.html">小视频</a></p>
                </li>
                <li>
                    <span class="iconfont icon-yanchu"></span>
                    <p class="zx"><a href="dxm4.html">演出</a></p>
                </li>
                <li>
                    <span class="iconfont icon-wode"></span>
                    <p class="zx"><a href="dxm5.html">我的</a></p>
                </li>
            </ul>
        </div>
</body>
</html>